/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { PureComponent } from "react";
import { Modal, Spin, Steps, Icon } from "antd";
import { connect } from "dva";
import { isArray } from "@/utils/isSomeType";
import { dateCalendar } from "@/utils/utils";
import styles from "./ExpressInfoModal.less";

const { Step } = Steps;

@connect(({ express, loading }) => {
  return {
    expressInfo: express.expressInfo,
    orderExpressInfo: express.orderExpressInfo,
    paymentLoading: loading.effects["express/getOrderPaymentExpressInfo"],
    recordLoading: loading.effects["express/getOrderExpressInfo"],
  };
})
class ExpressInfo extends PureComponent {
  
  componentDidMount() {
    this.getExpressInfo();
  }
  
  getExpressInfo = () => {
    const { dispatch, data, type } = this.props;
    
    dispatch({
      type: type == "orderRecord" ? "express/getOrderExpressInfo" : 'express/getOrderPaymentExpressInfo',
      payload: {
        ...data,
      },
    });
  };

  progressDot = (iconDot, { status }) => {
    return <Icon type={status === "success" ? "check-circle" : "down-circle"} />;
  };

  expressFormat = () => {
    const { orderExpressInfo, paymentLoading, recordLoading, type } = this.props;
    const loading = type == "orderRecord" ? recordLoading : paymentLoading
    if (!orderExpressInfo || !(isArray(orderExpressInfo.data) && orderExpressInfo.data.length !== 0) || loading)
      return (
        <span style={{ color: "#999" }}>
          {loading ? "物流信息读取中..." : "暂无物流信息"}
        </span>
      );
    return (
      <Steps
        direction="vertical"
        progressDot={this.progressDot}
        labelPlacement="vertical"
      >
        {orderExpressInfo.data.map((item, index) => {
          const { time, context, status } = item;
          return (
            <Step
              status={status == 'signed' ? "success" : "wait"}
              key={index}
              title={dateCalendar(`${time}`)}
              description={context}
            />
          );
        })}
      </Steps>
    );
  };

  render() {
    const { loading } = this.props;
    return (
      <Spin spinning={loading === true}>
        <div className={styles.infoList}>{this.expressFormat()}</div>
      </Spin>
    );
  }
}

class ExpressInfoModal extends PureComponent {
  state = {
    visible: false,
  };

  handleCancel = () => {
    this.props.cleanData();
  };

  static getDerivedStateFromProps(props) {
    return {
      visible: !!props.data,
    };
  }

  modalTitle = () => {
    const { waybill_no, brand_name } = this.props.data;
    return `物流详情： ${waybill_no} ${brand_name}`;
  };

  render() {
    const { visible } = this.state;
    const { data, type } = this.props;
    if (!data) return null;
    const { id } = data;
    return (
      <Modal
        onCancel={this.handleCancel}
        title={this.modalTitle()}
        centered
        visible={visible}
        width={800}
        footer={false}
        destroyOnClose
      >
        <ExpressInfo
          data={{
            id,
          }}
          type={type}
        />
      </Modal>
    );
  }
}

export { ExpressInfoModal as default, ExpressInfo };
